<!--产品明细-->
<template>
  <div class="product-info-box ne-bg-box">
    <div class="pro-title clearfix">
      <p class="left">
        {{
          "详细信息——" + changeRow.offerName + " " + customerNew + " " + status
        }}
      </p>
      <p class="right">
        耗时：[39]毫秒- <span class="orange">{{ ordertitle }}</span>
      </p>
    </div>
    <div class="button-p-box clearfix" v-if="isShow">
      <div class="right">
        <!-- <el-button class="el-button-or-b" type="text"
          ><i class="u-icon icon-order"></i>查看服务订单</el-button
        >
        <el-button type="text"><i class="u-icon icon1"></i>输出Excel</el-button
        >| -->
        <el-button type="text" @click="msgInfo">
          <i class="u-icon icon2"></i>查看电子档案上传记录</el-button
        >|
        <el-button type="text" @click="msgInfo"
          ><i class="u-icon icon3"></i>查看电路预警信息</el-button
        >|
        <el-button type="text" @click="msgInfo"
          ><i class="u-icon icon4"></i>查看相关联订单</el-button
        >|
        <el-button type="text" @click="toFlowChart"
          ><i class="u-icon icon5"></i>查看流程图</el-button
        >|
        <el-button type="text" @click="msgInfo"
          ><i class="u-icon icon6"></i>查看合同稽核结果</el-button
        >|
      </div>
    </div>
    <div class="zc-info clearfix">
      <!-- <p class="left">
        <i class="icon line-icon"></i
        >增值税税率信息：
      </p> -->
      <p class="left">
        <i class="icon huilv-icon"></i>当前人民币对美元汇率为：
        <span>0.1478</span>
      </p>
      <p class="right">
        <i class="icon laidan-icon"></i>来单标识：<span>政企crm</span>
      </p>
    </div>
    <div class="ppm-container">
      <PPMPage
        v-if="pageData.length > 0"
        :formData="formData"
        :pageData="pageData"
        :isBtnShow="isBtnShow"
        ref="ppmPage"
        @func="getParam"
      />
    </div>
    <div
      class="m-footer-box"
    >
      <el-button class="orange-btn" type="primary" plain @click="saveProdDetail"  v-show="isFootBtn"
        >保存</el-button
      >
      <el-button class="orange-btn" type="info" plain @click="closeFun"
        >关闭</el-button
      >
    </div>
    <el-button style="background-color: #f58d26;color: #fff;margin: .15rem 0 0 .2rem;" @click="finddhFun">查看单据历程</el-button>
    <div :model="businessLog">
      <div>
        <div class="zc-info clearfix">
          <div
            style="float: left; width: 3px; height: 17px; background: #f56d39"
          ></div>
          <span class="detailsTitle">流水日志</span>
        </div>
      </div>
      <div class="m-box" v-if="businessLog.length >= 1">
        <div class="forClass" v-for="(item, i) in businessLog" :key="i">
          <div class="operation">
            <p class="editDate">
              <i class="icon-time"></i>
              <span class="character"> 修改日期： </span>
              <span class="time">{{ item.updateDate }} </span>
            </p>
            <p class="seeMation" @click="mationClick(item)">
              <i class="icon seeMation-icon"> </i>
              查看属性详情
            </p>
          </div>
          <div class="contentList">
            <table class="mationTable">
              <tr>
                <td class="shallower">变更业务名称：</td>
                <td>{{ item.serviceOfferName }}</td>
                <td class="shallower">修改来源：</td>
                <td>
                  {{ item.modTypeFlag | modTypeFlag }}
                </td>
                <td class="shallower">修改人：</td>
                <td>{{ item.createStaffName }}</td>
                <td class="shallower">原流水号：</td>
                <td>{{ item.modOldOrderNbr }}</td>
              </tr>
              <tr>
                <td class="shallower">新流水号：</td>
                <td>{{ item.custSoNumber }}</td>
                <td class="shallower">修改原因：</td>
                <td colspan="5">{{ item.remark }}</td>
              </tr>
            </table>
          </div>
          <div class="ifShow" v-show="item.modId == showId">
            <div class="vLoading" v-loading="detailsLoading">
              <div>
                <table class="showTable">
                  <tr>
                    <td class="highLightO">属性名称</td>
                    <td class="highLight">原属性值</td>
                    <td class="highLight">新属性值</td>
                    <td></td>
                    <td class="highLightO">属性名称</td>
                    <td class="highLight">原属性值</td>
                    <td class="highLight">新属性值</td>
                  </tr>
                </table>
              </div>
              <div :model="detailsLog" v-for="(item, i) in detailsLog" :key="i">
                <table class="showTable">
                  <tr>
                    <td class="details_name">
                      {{ item[0] ? item[0].ATTR_NAME_ALL : "" }}
                    </td>
                    <td class="details">
                      {{ item[0] ? item[0].attrValueOld : "" }}
                    </td>
                    <td class="details">
                      {{ item[0] ? item[0].attrValueNew : "" }}
                    </td>
                    <td>
                      <div
                        style="
                          border-left: 1px dashed #9a9a9a;
                          height: 15px;
                          width: 1px;
                          margin-left: 25%;
                        "
                      ></div>
                    </td>
                    <td class="details_name">
                      {{ item[1] ? item[1].ATTR_NAME_ALL : "" }}
                    </td>
                    <td class="details">
                      {{ item[1] ? item[1].attrValueOld : "" }}
                    </td>
                    <td class="details">
                      {{ item[1] ? item[1].attrValueNew : "" }}
                    </td>
                  </tr>
                </table>
              </div>
              <!--<div class="addContent">
                              <i class="icon add-icon" @click="addClick"> </i>
                          </div>-->
            </div>
          </div>
        </div>
      </div>
      <div class="noData" v-else>暂无数据</div>
    </div>
    <el-dialog class="" append-to-body  width="98%" top='3vh' title="查看单据历程" v-if="dialogVisible" :visible.sync="dialogVisible">
      <DocumentHistory :changeRow="changeRow" :show.sync="dialogVisible" ></DocumentHistory>
    </el-dialog>
  </div>
</template>
<script>
import pageOfferDetail from "@/utils/pageOfferDetail";
import pageOfferDetailSave from "@/utils/pageOfferDetailSave";
import pageOfferInstDetail from "@/utils/pageOfferInstDetail";
import OrderService from "@/api/order/OrderService.js";
import CustOrderService from "@/api/order/CustOrderService";
import DocumentHistory from "@/components/order/DocumentHistory";
import { Loading } from "element-ui";
import { mapState } from "vuex";
export default {
  name: "productInfo",
  data() {
    return {
      dialogVisible: false,
      detailsLoading: true,
      status: "",
      isBtnShow: false, //PPM配置页面是否带提交按钮
      showId: 0,
      businessLog: [],
      detailsLog: [],
      changeRow: {},
      ppmCondition: {},
      ordertitle: "",
      temp: {},
      formData: {},
      pageData: [],
      isShow: true, //操作菜单显示隐藏
      resourceData: {},
      isFootBtn:true,
    };
  },
  props: {},
  filters: {
    modTypeFlag: function (value) {
      const mapObj = {
        1: "界面明细修改",
        3: "批量修改需求、订单单据修改",
        4: "数据变更单修改",
        5: "资源池信息填写",
      };
      let value_ = String(value);
      return mapObj[value_] ? mapObj[value_] : "单据修改";
    },
  },

  async created() {
    //2021/8/1cjj
    this.changeRow = JSON.parse(sessionStorage.getItem("changeRow"));
    this.ppmCondition = JSON.parse(sessionStorage.getItem("detailCondition")); //解决详情刷新缓存请求条件被覆盖问题
    sessionStorage.setItem("ppmCondition", JSON.stringify(this.ppmCondition));
    this.productName(this.ppmCondition);
    //产品实例库查询跟5g产品详情需要去掉保存按钮
    if(this.changeRow.productLibrary == 'productMation'||this.ppmCondition.productId=='540096329'){
      this.isFootBtn=false;
    }
    let res = await OrderService.qryPageTempAttr(this.ppmCondition);
    if (res.meta.resCode == "0") {
      this.pageData = res.meta.resList.pageModel;
      this.formData = res.meta.resList.paramModel;
      this.resourceData = res.meta.resList.resourceModel;

      if (this.ppmCondition.optionId == "314") {
        //产品实例
        this.temp = {
          custId: this.changeRow.custId,
          prodInstId: this.changeRow.prodInstId,
          offerInstId: this.changeRow.offerInstId,
          custSoNumber: this.changeRow.custSoNumber,
          orderItemIds: "",
        };
      } else {
        this.temp = {
          custId: this.changeRow.custId,
          orderSource: "ORDER",
          custSoNumber: this.changeRow.custSoNumber,
          orderItemIds: this.changeRow.orderItemId,
        };
      }
      this.setPageOfferDetail(this.temp, this.ppmCondition.optionId);
    }
  },
  mounted() {
    if (this.ppmCondition.optionId == 314) {
      this.isShow = false;
    }
    //2021/8/6 add by cjj
    if (this.ppmCondition.audState) {
      //从工单销售品列表进入
      const title =
        this.ppmCondition.optionId == "310" ||
        this.ppmCondition.optionId == "311"
          ? "需求单"
          : "订单";
      this.ordertitle =
        title +
        (this.ppmCondition.audState == "审核同意"
          ? "已审核"
          : this.ppmCondition.audState);
    } else {
      //从改单订单项列表进入
      this.ordertitle = "";
    }
    //结束

    this.getOrderItemModifyList();
  },
  computed: {
    customerNew() {
      let customerNew = "";
      if (this.ppmCondition.optionId != "314") {
        customerNew =
          JSON.parse(this.changeRow.batchNbr) > 0
            ? this.changeRow.custSoNumber +
              "-" +
              this.changeRow.batchNbr +
              "(" +
              this.changeRow.orderItemSeq +
              ")"
            : this.changeRow.custSoNumber +
              "(" +
              this.changeRow.orderItemSeq +
              ")";
      } else {
        customerNew = this.changeRow.custSoNumber;
      }
      return customerNew;

    }
  },
  components: {DocumentHistory},
  methods: {
    finddhFun() {
      this.dialogVisible = true;
    },
    closeFun() {
      // window.opener = null;
      window.close();
    },
    statusFun() {
      if (this.changeRow.orderStateCd == "50030002") {
        this.status = "需求单";
      } else if (this.changeRow.orderStateCd == "50030003") {
        this.status = "订单";
      } else if (this.changeRow.optionId == "314") {
        this.status = "实例";
      } else if (this.changeRow.optionId == "315") {
        this.status = "服务订单";
      }
    },
    getParam() {},
    async productName(params) {
      //加载事件规则JS add by cjj 2020/8/10
      sessionStorage.removeItem("proName");
      let result = await OrderService.getByProdId(params);
      if (result.code == 200) {
        if (result.meta && result.meta !== {}) {
          let proName = result.meta.catalogName + result.meta.tempId;
          sessionStorage.setItem("proName", proName);
        }
      }
    },
    async saveProdDetail(){
      let flag = this.$refs.ppmPage.validLoad();
      if (flag == "1") {
        //明细报文提交
        let params = pageOfferDetailSave.buildObject(
          this.formData,
          "330",
          this.changeRow.orderItemId,
          this.changeRow.custId
        );
        const result = await pageOfferDetailSave.modOrderInfoByOption(params);
        if (result.resultCode == "0") {
          if (this.ppmCondition.optionId == "314") {
            //产品实例
            this.temp = {
              custId: this.changeRow.custId,
              prodInstId: this.changeRow.prodInstId,
              offerInstId: this.changeRow.offerInstId,
              custSoNumber: this.changeRow.custSoNumber,
              orderItemIds: "",
            };
          } else {
            this.temp = {
              custId: this.changeRow.custId,
              orderSource: "ORDER",
              custSoNumber: this.changeRow.custSoNumber,
              orderItemIds: this.changeRow.orderItemId,
            };
          }

          this.setPageOfferDetail(this.temp, this.ppmCondition.optionId);
          this.$message({
            type: "success",
            message: "保存成功!",
          });
        } else {
          this.$message({
            type: "error",
            message: "保存失败:" + result.resultMsg,
          });
          return;
        }
      } else {
        return;
      }
    },
    /**
     * 查看属性详情事件
     */
    mationClick(item) {
      /*
       * 标签显示隐藏写法： v-show="item.id == showId"
       * 逻辑：点击事件传递过来的id如果不等于this.showId，则表示是第一次或者点击的新的一条详情，那么设置
       *  this.showId = id，"item.id === showId"为true,则展示出隐藏部分，已经展示的部分的v-show就为false。
       *       点击事件传递过来的id如果全等于this.showId，则表示是点击到的是已经展示的那条详情，那么设置
       *  this.showId = 0，"item.id === showId"为false,则隐藏展示的详情。
       * */
      this.detailsLoading = true;
      this.detailsLog = [];
      if (item.modId != this.showId) {
        this.showId = item.modId;
        this.getOrderAttrModifyList(item);
      } else if (item.modId == this.showId) {
        this.showId = 0;
      }
    },
    addClick() {},

    async setPageOfferDetail(temp, optionId) {
      if (optionId == "314") {
        let loadingInstance = Loading.service({ fullscreen: true });
        let res = await OrderService.qryPageOfferInstDetail(temp);
        loadingInstance.close();
        if (res.resultCode == "0") {
          pageOfferInstDetail.RewObject(
            res,
            this.formData,
            this.ppmCondition.productId
          );
        }
      } else {
        let loadingInstance = Loading.service({ fullscreen: true });
        let res = await OrderService.qryPageOfferDetail(temp);
        loadingInstance.close();
        if (res.resultCode == "0") {
          pageOfferDetail.RewObject(
            res,
            this.formData,
            this.ppmCondition.productId,
            this.resourceData
          );
        }
      }
    },

    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
      var r = window.location.search.substr(1).match(reg); //匹配目标参数
      if (r != null) return unescape(r[2]);
      return null; //返回参数值
    },
    /**
     * 流水日志列表
     * this.changeRow - 父页点击的那条数据
     */
    async getOrderItemModifyList() {
      let params = {
        custId: this.changeRow.custId || "",
        offerInstId: this.changeRow.offerInstId || "",
        custSoNumber: this.changeRow.custSoNumber || "",
        batchNbr: this.changeRow.batchNbr,
      };
      const result = await OrderService.qryOrderItemModifyList(params);
      if (result.code == 200) {
        this.businessLog = result.meta.qryOrderItemModifyList;
      } else {
      }
    },
    /**
     * 流水日志-查看属性详情
     * item - 点击到的那条数据
     */
    async getOrderAttrModifyList(item) {
      let params = {
        modId: item.modId || "",
        custId: item.custId || "",
        modTypeFlag: item.modTypeFlag || "",
        orderItemId: item.orderItemId || "",
        prodId: this.changeRow.prodId || "",
        serviceOfferId: item.serviceOfferId || "",
        modType: item.custOrderType || "",
      };
      const result = await OrderService.qryOrderItemAttrModifyList(params);
      if (
        result.code == 200 && result.meta.orderModifyLogs
          ? result.meta.orderModifyLogs.length >= 1
          : false
      ) {
        this.detailsLoading = false;
        //数据处理
        let arrayMap = [];
        let dataMap = result.meta.orderModifyLogs;
        for (let i = 0; i < dataMap.length; i++) {
          arrayMap.push(dataMap[i]); //先往arrayMap中存储对象数据
          if (dataMap.length == 1) {
            //只有一条数据，直接存储到到detailsLog中。
            this.detailsLog.push(arrayMap);
            arrayMap = [];
          } else if (i % 2) {
            //循环之初 i = 0，i不能被2整除则表示循环到第偶数个对象了，这时将arrayMap存储到detailsLog中。
            this.detailsLog.push(arrayMap);
            arrayMap = [];
          } else if (dataMap.length - 1 == i) {
            //此判断用作是奇数条数据的时候，最后一条数据存储。
            this.detailsLog.push(arrayMap);
            arrayMap = [];
          }
        }
      } else {
        this.detailsLoading = false;
      }
    },
    //流程图跳转
    async toFlowChart() {
      const result = await CustOrderService.getFlowInst({
        orderItemId: this.changeRow.orderItemId,
      });
      let flowInfo = {
        processInstanceId: result.meta.FLOW_INST_ID,
        custSoNumber: this.changeRow.custSoNumber,
        serviceOfferName: this.changeRow.serviceOfferName,
        prodName: this.changeRow.prodName,
        orderItemSeq:
          this.changeRow.orderItemSeq != undefined &&
          this.changeRow.orderItemSeq != ""
            ? this.changeRow.orderItemSeq
            : "",
      };
      sessionStorage.setItem("flowInfo", JSON.stringify(flowInfo));
      window.open(`orders.html?router=flowChart`, "_blank");
    },
    //功能未开放弹窗
    msgInfo() {
      this.$alert(
        '<div class="text-center" style="padding-top: .1rem;"><i class="ne-await iconfont icon-jingqingqidai01" style="font-size: .6rem; color:#f56d39;"></i><p style="padding-top: .1rem;">功能暂未开放,敬请期待！</p></div>',
        "",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.ne-bg-box {
  margin: 0.1rem 0;
}
.product-info-box {
  min-height: calc(100% - 0.2rem);
  .pro-title {
    width: calc(100% - 0.4rem);
    margin: 0 auto;
    border-bottom: 0.01rem solid $color_DDD;

    .left {
      border-bottom: 0.02rem solid #f56f3c;
      color: $textColor1;
      margin: 0;
      padding-bottom: 0.1rem;
      font-size: $fontSize_v3;
    }

    .right {
      color: $textColor3;
    }
  }

  ::v-deep .el-input.is-disabled .el-input__inner {
    color: #666;
  }

  .button-p-box {
    width: 100%;
    margin-top: 0.1rem;
    padding: 0 0.2rem;
    color: #ccc;
    button {
      border-radius: 0.05rem;
      margin-right: 0.03rem;
    }

    .button-or-b {
      border: 1px solid #f56f3c;
      background-color: #ffe0e0;
      color: #f56f3c;

      &:hover {
        background-color: rgba(245, 111, 60, 0.72);
        color: #fff;
      }
    }
  }

  ::v-deep .el-form-item .el-form-item__label{
      height: auto !important;
  }

  .zc-info {
    width: calc(100% - 0.4rem);
    margin: 0.1rem auto 0 auto;
    padding: 0.11rem;
    background-color: rgba(255, 245, 230, 1);
    margin-top: 0.1rem;

    p {
      color: $textColor2;
      font-size: $fontSize_info;
      width: 33.3333%;
      margin: 0;

      span {
        display: inline-block;
        min-width: 0.6rem;
        text-align: center;
      }

      &:nth-child(1) {
      }

      &:nth-child(2) {
        width: 33.3333%;
        text-align: center;
      }

      &:last-child {
        width: 20%;
      }

      .icon {
        display: inline-block;
        width: 0.21rem;
        height: 0.21rem;
        vertical-align: middle;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        margin-right: 0.05rem;

        &.line-icon {
          background-image: url("~@/assets/imgs/order/icon-zzs.png");
        }

        &.huilv-icon {
          background-image: url("~@/assets/imgs/order/icon-hl.png");
        }

        &.laidan-icon {
          background-image: url("~@/assets/imgs/order/icon-ldbz.png");
        }
      }
    }
  }
}
.detailsTitle {
  margin-left: 0.1rem;
}
.m-box {
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  .forClass {
    margin-top: 0.2rem;
  }
}
.operation {
  width: calc(100% - 0.4rem);
  margin: 0rem auto 0 auto;
  background: #ffffff;
  // padding: 0.11rem;
  height: 0.3rem;
  line-height: 0.3rem;
  vertical-align: middle;
  i.icon-time {
    display: inline-block;
    width: 0.15rem;
    height: 0.15rem;
    background-image: url("../../assets/imgs/order/icon-time.png");
    background-size: 100% 100%;
    float: left;
    margin-top: 0.05rem;
    margin-right: 0.1rem;
    margin-left: 0.1rem;
  }
  .editDate {
    display: inline-block;
    margin-left: 5px;
    position: absolute;
    .character {
      color: #9a9a9a;
    }
    .time {
      color: #ff9e0d;
    }
  }
  .seeMation {
    cursor: pointer;
    float: right;
    color: #7194e3;
    font-weight: bold;
    margin-right: 0.2rem;
    font-size: 0.12rem;
    .icon {
      display: inline-block;
      width: 0.12rem;
      height: 0.12rem;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100%;
      margin-right: 0.05rem;
      &.seeMation-icon {
        background-image: url("~@/assets/imgs/order/icon-btn-4.png");
      }
    }
  }
}
.contentList {
  width: calc(100% - 0.4rem);
  margin: 0rem auto 0 auto;
  padding: 0.11rem;
  background-color: #f6f6f6;
  border: 1px solid #eaeaea;
  border-top: none;
  margin-top: 0.1rem;
  .mationTable {
    td {
      width: 10rem;
      padding-left: 0.1rem;
      padding-right: 0.5rem;
      padding-top: 0.1rem;
    }
    .shallower {
      color: #9a9a9a;
    }
  }
}
.ifShow {
  /*text-align: center;*/
  margin-left: 5%;
  .showTable {
    width: calc(100% - 0.4rem);
    td {
      padding-top: 0.1rem;
      width: 2.5rem;
      min-width: 2rem;
      max-width: 3rem;
      padding-left: 0.2rem;
      .details_name {
        color: #9a9a9a;
      }
    }
  }
  .highLightO {
    color: #f56d39;
    font-weight: bold;
  }
  .highLight {
    color: #ffad33;
    font-weight: bold;
  }
  .shallower {
    color: #9a9a9a;
  }
}
.vLoading {
  ::v-deep .el-loading-spinner {
    top: 10px;
    ::v-deep svg {
      height: 30px;
      width: 30px;
    }
  }
}
.addContent {
  width: 100%;
  text-align: center;
  .icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: 100%;
    background-image: url("../../assets/imgs/order/downico.png");
  }
}
.noData {
  width: calc(100% - 0.4rem);
  margin-bottom: 1rem;
  text-align: center;
  margin-left: 0.2rem;
  background-color: #f5f7fa;
}
.u-icon {
  display: inline-block;
  width: 0.18rem;
  height: 0.18rem;
  float: left;
  margin-top: 0.06rem;
  margin-right: 0.08rem;
}

.u-icon {
  display: inline-block;
  width: 0.18rem;
  height: 0.18rem;
  float: left;
  margin-top: 0.06rem;
  margin-right: 0.08rem;
}
.icon1 {
  background-image: url("../../assets/imgs/order/icon-btn-1.png");
  background-size: 100% 100%;
}
.icon2 {
  background-image: url("../../assets/imgs/order/icon-btn-2.png");
  background-size: 100% 100%;
}
.icon3 {
  background-image: url("../../assets/imgs/order/icon-btn-3.png");
  background-size: 100% 100%;
}
.icon4 {
  background-image: url("../../assets/imgs/order/icon-btn-4.png");
  background-size: 100% 100%;
}
.icon5 {
  background-image: url("../../assets/imgs/order/icon-btn-5.png");
  background-size: 100% 100%;
}
.icon6 {
  background-image: url("../../assets/imgs/order/icon-btn-6.png");
  background-size: 100% 100%;
}
.icon-order {
  background-image: url("../../assets/imgs/order/icon-btn-7.png");
  background-size: 100% 100%;
}
.m-footer-box {
  text-align: center;
  padding: 0.2rem 0.3rem;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
  background: #fff;
  z-index: 10;
}
</style>
